import RnButton from 'components/RnButton';
import React from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import {EventType, User} from 'types';
import dayjs from 'dayjs';
import lang from 'lang';
interface UserPropsType {
  creator?: User;
}
function UserInfo(props: UserPropsType) {
  const {creator} = props;

  const fromNow = dayjs(creator?.createdAt).fromNow();
  return (
    <View style={styles.userContainer}>
      <Image style={styles.creatorAvatar} source={{uri: creator?.avatar}} />
      <View style={styles.creatorTextContainer}>
        <Text
          style={{
            fontSize: 14,
            color: '#67616D',
          }}>
          {creator?.username}
        </Text>
        <Text
          style={{
            fontSize: 12,
            color: '#BABABA',
          }}>
          {`${lang('published')} ${fromNow}`}
        </Text>
      </View>
    </View>
  );
}
interface PropsType {
  detailInfo?: EventType;
}
export default function DetailSummary(props: PropsType) {
  const {detailInfo} = props;
  return (
    <View style={styles.container}>
      <View style={styles.channelBtn}>
        <RnButton borderShow={true} fontSize={12} color="#8560A9">
          {detailInfo?.channel?.name}
        </RnButton>
      </View>
      <View style={styles.eventContainer}>
        <Text style={styles.eventTitle}>{detailInfo?.name}</Text>
      </View>
      <UserInfo creator={detailInfo?.creator} />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 16,
    paddingTop: 16,
    paddingBottom: 24,
    backgroundColor: '#fff',
  },
  channelBtn: {
    flexWrap: 'wrap',
  },
  eventContainer: {
    marginTop: 12,
    marginBottom: 24,
  },
  eventTitle: {
    fontSize: 20,
    fontWeight: '500',
    color: '#453257',
  },

  userContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  creatorAvatar: {
    width: 36,
    height: 36,
    borderRadius: 18,
  },
  creatorTextContainer: {
    marginLeft: 12,
  },
});
